<!-- index.we -->
<template>
	<div>
		<tab1 class="page" :viewHeight="viewHeight" v-if="page===0" v-on:addGoodsNumber="addGoodsNumber" v-on:State="state"></tab1>
		<tab2 class="page" v-if="page===1" ></tab2>
		<tab3 class="page" v-if="page===2" v-on:State="state"></tab3>
		<tab4 class="page" v-if="page===3" v-on:State="state"></tab4>
		<tabbar_ ref="tabbar" bgopacity="0.5" :tabbarHeight="navBarHeightStr" :tabs="tabItems" :selected="page" v-on:switchPage="switchPage" ></tabbar_>
	</div>
</template>

<style>
	.page{
		background-color: #fff;
		z-index:0;
	}
</style>

<script>

    import tabbar_ from "./components/tabbar.vue";
    import tab1 from "./components/tab1.vue";
    import tab2 from "./components/tab2.vue";
    import tab3 from "./components/tab3.vue";
    import tab4 from "./components/tab4.vue";
    let modal = weex.requireModule('modal')

    module.exports = {
        data:{
            showNavPage:true,//默认显示导航页
            page:0,//默认选择的是第一个页面
            navBarHeight:100,
            navBarHeightStr:"100px",//nav高度
            viewHeight:'110px',
            config: WXEnvironment,
            tabItems: [
                {
                    title: "首页",
                    defaultTitleColor: "#000",
                    image: "http://gtms01.alicdn.com/tps/i1/TB1qw.hMpXXXXagXXXX9t7RGVXX-46-46.png",
                    selectedImage: "http://gtms04.alicdn.com/tps/i4/TB16jjPMpXXXXazXVXX9t7RGVXX-46-46.png",
                    activeTitleColor:"#db3652"
                },
                {
                    title: "最新",
                    defaultTitleColor: "#000",
                    image: "http://gtms03.alicdn.com/tps/i3/TB1LEn9MpXXXXaUXpXX9t7RGVXX-46-46.png",
                    selectedImage: "http://gtms02.alicdn.com/tps/i2/TB1qysbMpXXXXcnXXXX9t7RGVXX-46-46.png",
                    activeTitleColor:"#db3652"
                },
                {
                    title: "购物车",
                    defaultTitleColor: "#000",
                    image: "http://gtms01.alicdn.com/tps/i1/TB1B0v5MpXXXXcvXpXX9t7RGVXX-46-46.png",
                    selectedImage: "http://gtms04.alicdn.com/tps/i4/TB1NxY5MpXXXXcrXpXX9t7RGVXX-46-46.png",
                    activeTitleColor:"#db3652",
                    haslabel:true,
                    labelName:"cart",
                    label:5,
                    labelColor:"#db3652",
                },
                {
                    title: "个人中心",
                    defaultTitleColor: "#000",
                    image: "http://gtms01.alicdn.com/tps/i1/TB1B0v5MpXXXXcvXpXX9t7RGVXX-46-46.png",
                    selectedImage: "http://gtms04.alicdn.com/tps/i4/TB1NxY5MpXXXXcrXpXX9t7RGVXX-46-46.png",
                    activeTitleColor:"#db3652"
                }
            ],
        },
        components: {
            tabbar_,tab1,tab2,tab3,tab4
        },
        created() {
            // 开始监听导航栏的搜索按钮和信息按钮
            this.$on('naviBar.leftItem.click',function(e){
                modal.toast({
                    "message":"左边点击正常",
                    "duration":2
                });
            });
            this.$on('naviBar.rightItem.click',function(e){
                modal.toast({
                    "message":"右边点击正常",
                    "duration":2
                });
            });

            // 根据屏幕高度调整顶部导航栏高度
            let env = this.config;
            if(env.platform=='Web'){
                this.viewHeight=env.deviceHeight/env.dpr-this.navBarHeight+"px";
            }else{
                this.viewHeight=env.deviceHeight/2-this.navBarHeight+"px";
            }

        },
        methods:{
            // 监听子组件index发送过来的消息
            addGoodsNumber(data){
                // 再根据消息传递给tabbar
                this.$refs.tabbar.tabbarAccept(data);
            },
            // 隐藏tabbar
            state(data){
                // 再根据消息传递给tabbar
                this.$refs.tabbar.tabbarState(data);
            },
            // 监听子组件tabbar发送过来的消息
            switchPage(data){
                this.page = data.page;
            }
        }
    }
</script>